<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" height="100%" indicator indicatorMode="dot" circular></u-swiper>
		</view>
		<!-- 点餐方式 -->
		<view class="method">
			<u-grid :border="true" col="2" @click="gridClick">
				<!-- 点餐方式选项 -->
				<u-grid-item bgColor="#fff">
					<view class="method-item">
						<i class="iconfont icon-handbag-full"></i>
						<view class="title">门店自提</view>
						<view class="desc">下单免排队，到店自取</view>
					</view>
				</u-grid-item>
				<u-grid-item bgColor="#fff">
					<view class="method-item">
						<i class="iconfont icon-waimai"></i>
						<view class="title">外卖配送</view>
						<view class="desc">无接触配送，送货到家</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图图片
				swiperList: [],
			}
		},
		methods: {
			// 请求轮播图图片
			async getSpider() {
				let data = await this.$api.other.getSpiderImgAPI();
				// 保存轮播图
				this.swiperList = data.result.map(i => i.s_photos[0].path);
			},
			// 宫格点击事件
			gridClick(index) {
				// index表示点击了第几个宫格
				switch (index) {
					case (0):
						this.toMap();
						break;
					case (1):
						console.log("功能开发中~");
						break;
					default:
						break;
				}
			},
			// 跳转到地址选择页
			toMap() {
				this.$Router.push({
					path: '/map',
					// query: {
					// 	id: 1,
					// }
				});
			},
		},
		onLoad() {
			// 获取轮播图图片
			this.getSpider();
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		@include page-bgc();

		// 轮播图
		.swiper {
			height: 50vh;
		}

		.method {
			margin: 20rpx;
			padding: 80rpx 0rpx;
			background-color: #fff;
			border-radius: 20px;


			.method-item {
				text-align: center;

				i.iconfont {
					font-size: 80rpx;
					color: $theme-color;
				}

				.title {
					font-weight: 700;
					font-size: 36rpx;
					margin-top: 48rpx;
					margin-bottom: 20rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
</style>